<template>
    <div class="searchglobal">
        <div style="margin-bottom: 10px;">
            <el-input placeholder="请搜索" style="width: 30%;margin-right: 10px;" v-model="value"></el-input>
            <el-button type="primary" @click="search">搜索</el-button>

        </div>
        <div class="articlelist" v-for="item in articlelist">
                    <div>
                        <div> <img src="../assets/default.png" v-if="item.avatar == null"
                                style="width: 20px;height: 20px;" alt=""> <span  @click="todetail(item.userId)"  style="color: #4e5969;" class="hover">{{
                                    item.nickName }}</span><el-divider direction="vertical"></el-divider>
                            <span style="color: #4e5969;">{{ item.postTime }}{{ item.userIpAddress }}</span>
                            <el-divider direction="vertical"></el-divider>
                            <span style="color: #4e5969;">{{ item.pBoardName }} </span>
                            <span v-if="item.boardName">/{{ item.boardName }}</span>

                        </div>

                        <div @click="detail(item.articleId)"
                            style="margin-top: 10px;color: #4a4a4a;font-weight: bold;cursor: pointer;" class="hover"> {{
                                item.title }}
                        </div>
                        <div style="margin-top: 10px;">{{ item.summary }}</div>
                        <div class="article-info" style="margin-top: 10px;">
                            <span class="iconfont icon-eye-solid" style="margin-right: 10px;">
                                {{ item.readCount == 0 ? '阅读' : item.readCount }}
                            </span>
                            <span class="iconfont icon-good" style="margin-right: 10px;">
                                {{ item.goodCount == 0 ? '点赞' : item.goodCount }}
                            </span>
                            <span class="iconfont icon-comment">
                                {{ item.commentCount == 0 ? '评论' : item.commentCount }}
                            </span>

                        </div>
                    </div>

                    <div>
                        <img v-if="item.cover !== '' && item.cover !== null" style="width: 100px;height: 100px;"
                            :src="'/api/file/getImage/' + item.cover" />
                    </div>
                </div>
    </div>
</template>
<script setup>
import { ref } from 'vue';
import service from '../utils/request';
import { useRouter } from 'vue-router';
const router=useRouter()
const articlelist=ref([]);
const value = ref("");
const search=async()=>{
  const res=await  service.get("/forum/search",{
    params:{
        title:value.value
    }
  })
  articlelist.value = res.data
  console.log(res)
}
const detail = (id) => {
    router.push({
        path: "/detail/" + id
    })
}
const todetail=(e)=>{
    router.push({
        path:"/my",
        query:{
            userId:e
        }
    })

}
</script>
<style scoped>
.searchglobal {
    width: 70%;
    height: auto;
    margin: 0 auto;
    padding: 10px;
    box-sizing: border-box;
}

.hover {
    cursor: pointer;
}

.hover:hover {
    color: #007fff !important;
}

.articlelist {
    width: 100%;
    height: auto;
    border-bottom: 1px solid #ddd;
    display: flex;
    background: #fff;
    padding-bottom: 10px;
    margin-bottom: 10px;
    padding: 10px;
    box-sizing: border-box;
    justify-content: space-between;
}

.active {
    color: #007fff !important;
}

.article {
    width: 100%;
    height: auto;
    background: #fff;

    padding: 20px;
    box-sizing: border-box;
}

.active {

    color: #007fff;
}
</style>